<template>
  <div id="introduce">
    <lesson 
      v-for="item in db"
      :key="item.id"
      :lesson="item"
      @del="show(item)"
      v-model:title.toupper.substr_10="item.title"
      v-model:price="item.price"
    />
  </div>
  <!-- <GInput :value='title' @update:value='title = $event'/> -->
  <!-- <GInput v-model:value="title" /> -->
  <!-- <GInput v-model="title" />{{title}} -->
  <!-- <input type="text" :value="title" @input="title=$event.target.value">{{title}} -->
</template>

<script>
import db from '../data/db'
import Lesson from './components/Lesson.vue'
import GInput from './components/GInput.vue'
export default {
  components:{Lesson,GInput},
data() {
  return {
    db,
    title:'giluo'
  }
},
methods: {
  show(item) {
    const index = this.db.findIndex(l=>l.id == item.id)
    this.db.splice(index,1)
  },
  // input(event) {
  //   this.title = event.target.value
  // }
}
}
</script>

<style scoped>
#introduce{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  column-gap: 10px;
}
</style>